<script lang='ts'>
import { defineComponent, inject } from 'vue'
export default defineComponent({
    name: 'JxtechBasicHeader'
})
</script>
<script lang='ts' setup>
import router from '/@/router'
import Breadcrumb from './breadcrumb.vue'
import { Refresh } from '@element-plus/icons'
import { watch } from 'vue'
const props = defineProps({
    breadcrumbMappingUrl: String
})
const onRefresh = () => {
    router.push({ path: '/redirect' + router.currentRoute.value.fullPath })
}

</script>
<template>
    <div class="jxtech-basic-header-wrapper">
        <div class="jxtech-basic-header-breadcrumb">
            <breadcrumb :breadcrumb-mapping-url="breadcrumbMappingUrl"></breadcrumb>
        </div>

        <div class="jxtech-basic-header-extra">
            <!-- <jxtech-svg-icon
                :icon="'#icon-shuaxin8'"
                :size="14"
                class="pointer refresh-btn"
                @click="onRefresh"
            ></jxtech-svg-icon>-->
            <slot name="extra"></slot>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.jxtech-basic-header-wrapper {
    height: 56px;
    width: calc(100% + 10px);
    display: flex;
    justify-content: space-between;
    padding: 0 10px 0 0;
    background-color: #eaf1f9;
    margin-top: -10px;
    // margin: -10px -10px 0;
    // position: sticky;
    top: -10px;
    z-index: 999;
}
.jxtech-basic-header-breadcrumb {
    display: flex;
    align-items: center;
}
.jxtech-basic-header-extra {
    display: flex;
    align-items: center;
    // padding-right: 20px;
    > * {
        margin-left: 10px;
    }
}

.el-button {
    height: 30px !important;
    display: flex;
    align-items: center;
}
.jextch-button__text--expand {
    margin-left: 5px;
    margin-right: -0.3em;
}
::v-deep(.el-dropdown--small) {
    margin-left: 10px;
}
</style>

